<template>
  <view>
    <Nav nav-type="title" titleText="隐患列表" />
    <!-- 搜索 S -->
    <view class="search-box">
      <view>
        <t-icon
          name="calendar-1"
          size="58rpx"
          @click="calendarVisible = true"
        />

        <DateRangeSelect
          v-model:visible="calendarVisible"
          v-model:start="startTime"
          v-model:end="endTime"
          :showCell="false"
          @change="onSearch"
        />
      </view>

      <!-- 关键词 -->
      <t-search
        class="keyword"
        v-model="keyword"
        placeholder="请输入隐患描述"
        @submit="onSearch"
        @clear="onSearch"
      />

      <view>
        <t-icon
          name="caret-down-small"
          size="58rpx"
          @click="companyVisible = true"
        />

        <CompanySelect
          v-model:value="enterpriseId"
          v-model:visible="companyVisible"
          :showCell="false"
          @change="onSearch"
        />
      </view>
    </view>
    <t-tabs
      default-value="0"
      v-model:value="hazardStatus"
      theme="tag"
      @change="onSearch"
    >
      <t-tab-panel
        v-for="(item, index) in statusList"
        :key="index"
        :value="item.id"
        :label="item.name"
      />
    </t-tabs>
    <!-- 搜索 E -->

    <!-- 列表 S -->
    <scroll-view
      class="message-list"
      scroll-y
      refresher-enabled
      :refresher-triggered="loading"
      @refresherrefresh="onSearch"
      @scrolltolower="nextPage"
    >
      <view
        class="list-item"
        :id="'list' + item.id"
        :data-index="index"
        @click="goInfo(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="item">
          <view class="head">
            <view class="title">{{ item.enterpriseName || "--" }}</view>
            <view
              class="status"
              :style="{ backgroundColor: statusMap[item.status].color }"
              >{{ statusMap[item.status].name }}</view
            >
          </view>
          <view class="content">{{ item.description || "--" }}</view>
          <view class="footer">
            <view
              class="level"
              :style="{ color: levelMap[item.level].color }"
              >{{ levelMap[item.level].name }}</view
            >
            <view class="time">{{ item.createTime }}</view>
          </view>
        </view>
      </view>
      <t-empty v-if="!list.length" class="empty" description="暂无数据">
        <t-icon name="info-circle-filled" size="58rpx" />
      </t-empty>
    </scroll-view>
    <!-- 列表 E -->

    <view class="btn-box">
      <t-button
        size="large"
        theme="primary"
        shape="round"
        block
        @click="goReport"
        >隐患上报</t-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Nav from "@/components/nav";
import CompanySelect from "@/components/companySelect";
import DateRangeSelect from "@/components/dateRangeSelect";
import { getHiddenList } from "@/api/hiddenDanger";
import { onShow } from "@dcloudio/uni-app";

// 搜索数据
const size = ref(10);
const current = ref(1);
const total = ref(0);

const keyword = ref("");
const startTime = ref("");
const endTime = ref("");
const enterpriseId = ref("");
const hazardStatus = ref(0);

const loading = ref(false);
const companyVisible = ref(false);

const calendarVisible = ref(false);

const list = ref([]);
const statusMap = {
  1: {
    name: "待整改",
    color: "red",
  },
  2: {
    name: "待审核",
    color: "#dad60f",
  },
  3: {
    name: "已驳回",
    color: "#DA590F",
  },
  99: {
    name: "已整改",
    color: "#0fda2a",
  },
};

const levelMap = {
  1: {
    name: "一般隐患",
    color: "#0fda2a",
  },
  2: {
    name: "重大隐患",
    color: "#DA590F",
  },
};

const statusList = [
  {
    id: 0,
    name: "所有",
  },
  {
    id: 1,
    name: "待整改",
  },
  {
    id: 2,
    name: "待审核",
  },
  {
    id: 3,
    name: "已驳回",
  },
  {
    id: 99,
    name: "已整改",
  },
];

const getListFn = (add = false) => {
  if (add !== true) {
    current.value = 1;
  }

  uni.showLoading({
    title: "加载中",
    mask: true,
  });

  loading.value = true;

  getHiddenList({
    size: size.value,
    current: current.value,
    description: keyword.value,
    startTime: startTime.value,
    endTime: endTime.value,
    hazardStatus: hazardStatus.value,
  })
    .then((res) => {
      //   console.log("设备列表：", res.data);
      const { records, total: tVal } = res.data;
      list.value = [...(add === true ? list.value : []), ...records];
      total.value = tVal;
    })
    .catch((err) => {
      console.log("列表错误：", err);
    })
    .finally(() => {
      uni.hideLoading();

      loading.value = false;
    });
};

/** 搜索 或 刷新数据 */
const onSearch = () => {
  if (loading.value) return;

  current.value = 1;
  list.value = [];
  console.log("onSearch");
  getListFn();
};

const nextPage = () => {
  if (current.value * size.value >= total.value) {
    return;
  }

  current.value = current.value + 1;

  console.log("nextPage");
  getListFn(true);
};

const goReport = () => {
  uni.navigateTo({
    url: "/pages/hiddenDangerReport/index",
  });
};

const goInfo = (item) => {
  uni.navigateTo({
    url: "/pages/hiddenDangerInfo/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("sendInfo", {
        info: item,
      });
    },
  });
};

onShow(() => {
  console.log("onShow");
  onSearch();
});

// getListFn();
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.keyword {
  width: 600rpx;
  margin-left: 20rpx;
}

.message-list {
  height: 1050rpx;
  flex-grow: 1;
  background-color: #f0f0f0;
}

.list-item {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    & > view {
      width: 100%;
    }
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      max-width: 70vw;
    }

    .status {
      font-size: 36rpx;
      color: #fff;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
    }
  }

  .content {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    font-size: 32rpx;
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.btn-box {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30rpx;
  height: 100rpx;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  position: absolute;
  bottom: 40rpx;
  width: 100%;
}
</style>
